import React, { useState } from 'react';
import { Table, Button, Space, Switch, Modal, Form, Input, Select, Breadcrumb } from 'antd';
import styles from './Categories.module.css';

function Categories() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  
  const columns = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '分类等级',
      dataIndex: 'level',
      key: 'level',
    },
    {
      title: '是否显示',
      dataIndex: 'isShow',
      key: 'isShow',
      render: (_, record) => (
        <Switch checked={record.isShow} />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="link">编辑</Button>
          {record.level === '一级' && <Button type="link">新增下一级</Button>}
          {record.level === '二级' && <Button type="link">查看上一级</Button>}
          <Button type="link" danger>删除</Button>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: '洗鞋',
      level: '一级',
      isShow: true,
    },
    {
      key: '2',
      name: '皮鞋护理',
      level: '二级',
      isShow: false,
    },
    // ... 其他数据
  ];

  const handleSubmit = () => {
    form.validateFields().then(values => {
      console.log('提交的值：', values);
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  return (
    <div className={styles.container}>
      <Breadcrumb className={styles.breadcrumb}>
        <Breadcrumb.Item>商品管理</Breadcrumb.Item>
        <Breadcrumb.Item>商品分类</Breadcrumb.Item>
      </Breadcrumb>

      <div className={styles.header}>
        <Button type="primary" onClick={() => setIsModalVisible(true)}>
          + 添加分类
        </Button>
      </div>
      
      <Table columns={columns} dataSource={data} />

      <Modal
        title="添加分类"
        open={isModalVisible}
        onCancel={handleCancel}
        footer={[
          <Button key="cancel" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" style={{ background: '#52c41a', borderColor: '#52c41a' }} onClick={handleSubmit}>
            提交
          </Button>
        ]}
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            label="分类名称"
            name="name"
            rules={[{ required: true, message: '请输入分类名称' }]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          
          <Form.Item
            label="分类等级"
            name="level"
            rules={[{ required: true, message: '请选择分类等级' }]}
          >
            <Select placeholder="一级">
              <Select.Option value="1">一级</Select.Option>
              <Select.Option value="2">二级</Select.Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            label="分类描述"
            name="description"
          >
            <Input.TextArea
              placeholder="请输入"
              rows={4}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default Categories; 